<template>
	<div id="app">
		<!-- banner -->
		<div class="ban" :style="'height:338px;background-image: url('+banImg+');background-size:cover;'">
		    <div class="txt" style="padding-top:99px;">
		        <div class="wp">
		            <h3>设计职位</h3>
		            <div class="desc">
		                <p>更多知名企业邀请你的加入</p>
		            </div>
		            <a @click="toPublishJob">发布职位</a>
		        </div>
		    </div>
		</div>
		<!-- banner -->
		<!-- 内容 -->
		<div class="main">
		    <div class="wp">
		        <div class="g-boxq2">
		            <div class="m-topl">
		                <ul class="ul-listl3 ls">
		                    <li class="on">
		                        <a @click="toHome" class="con">首页</a>
		                    </li>
		                    <li>
		                        <a @click="toJob" class="con">我的职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishJob" class="con">发布职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishEpiboly" class="con">项目外包</a>
		                    </li>
		                </ul>
		            </div>
		            <div class="m-sobox">
						<el-row>
						  <el-col :span="24">
							<div class="form job-search-form">
								<div class="ll job-home-ll" style="position:relative;">
									<input type="text" autocomplete="new-password" class="inp" @keyup="goSearch" placeholder="搜索关键字..." v-model="jobListParam.title"/>

									<i v-if="jobListParam.title" style="right:0;" @click="resetSearch" class="iconfont el-icon-close clear-btn"></i>
								</div>
							    <div class="rr job-home-rr" style="text-align: right;">
										<el-cascader
											size="large" clearable
											:options="options"
											v-model="selectedOptions"
											class="job-addr-cascader"
											@change="handleChange"
											placeholder="工作地点"
										  >
										  
										</el-cascader>
										<el-dropdown style="margin-right: 5px;margin-left: 15px;">
										  <span class="el-dropdown-link">
											{{jobNature}}<i class="el-icon-arrow-down el-icon--right"></i>
										  </span>
										  <el-dropdown-menu slot="dropdown">
											<el-dropdown-item v-for="(item,i) in jobNatureList" :key="i" @click.native="jobNatureChange(item.title)">{{item.title}}</el-dropdown-item>
										  </el-dropdown-menu>
										</el-dropdown>
							    
								</div>
							</div>
						</el-col>
						<!-- <el-col :span="3"><el-button type="primary" style="width: 100%;margin-top: 3px;margin-left: 10px;" @click="getJobList()()">搜索</el-button></el-col> -->
						</el-row>
		            </div>
		            <div class="m-demand">
		                <div class="g-titq3">
		                    <h3>所有职位</h3>
		                </div>
		                <ul class="ul-imgtxtq6">
		                    <li  v-for="(item,i) in jobList" :key="i">
		                        <a class="con myfancy" @click="detailsShow(item.id)">
		                            <div class="tit">
		                                <span>{{item.salary}}</span>
		                                <h3>{{item.title}}</h3>
		                            </div>
		                            <div class="info" style="color: #3B4249;">
										<el-row>
											<el-col :span="18" style="display:flex">
												<img src="../../assets/images/iconq43.png"/>{{item.province}} | {{item.city}}
											</el-col>
											<el-col :span="6" style="display:flex">
												<img src="../../assets/images/iconq44.png"/>{{item.jobNature}}
											</el-col>
										</el-row>
		                            </div>
									<span class="time" style="color: #3B4249;display:flex"><img src="../../assets/images/iconq45.png"/>{{getTime(item.createTime)}}</span>
		                            <div class="bot">
		                                <div class="pic">
											<!-- <img src="../../assets/images/picq60.jpg" alt="" /> -->
											<!-- <img v-if="item.member == null" src="../../assets/images/picq60.jpg" alt="" /> -->
											<img :src="item.member&&item.member.avatar?item.member.avatar:defaultAvatar" alt="" />
										</div>
		                                <span>{{item.companyName}}</span>
		                            </div>
		                        </a>
		                    </li>
		                </ul>

						<div class="m-not-foundl" v-if="jobList.length==0">
							<div class="txt">
								<p>抱歉，我们未找到相关内容的搜索结果。</p>
								<p>您可以尝试以下搜索？</p>
							</div>
							<ul class="ul-listl4">
								<li><a  class="con">游戏UI/UX</a></li>
								<li><a  class="con">游戏LOGO</a></li>
								<li><a  class="con">游戏ICON</a></li>
								<li><a  class="con">游戏UI动效</a></li>
								<li><a  class="con">游戏UI动效</a></li>
							</ul>
						</div>
		            </div>
		            <!-- 页码 -->
		            <div class="pages qm" v-if="jobList.length>0">
						<el-pagination
						  background
						   @size-change="changeSizeHandle" @current-change="currentChangeHandle"
						        :current-page="currentPage" :page-size="jobListParam.pageSize"
						  layout="prev,pager,next"
						  :total="total">
						</el-pagination>
		            </div>
		        </div>
		    </div>
		    <!-- 弹窗 -->
		    <div class="m-pop" id="m-win" style="display: block;" v-show="showDetails">
		        <div class="pop-bg"></div>
		        <div class="inner qm2 custom-scroll">
		            <a @click="detailsCancle()" class="close"></a>
		            <div class="m-mess">
		                <div class="col-r">
		                    <div class="top">
		                        <div class="pic">
									<img v-if="jobDetails.member == null" src="../../assets/images/picq63.jpg" alt="" />
									<img v-else :src="jobDetails.member.avatar" alt="" />
								</div>
		                        <div class="txt">
		                            <h3>{{jobDetails.companyName}}</h3>
		                            <div class="desc">
		                                <p>行业：{{jobDetails.jobType}}</p>
		                                <p>官网：<a :href="jobDetails.companyUrl" target="_blank">{{jobDetails.companyUrl}}</a></p>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="pos">
		                        <h2>其他职位</h2>
		                        <dl>
		                            <dd v-for="(item,i) in list" :key="i">
		                                <h3><a>{{item.title}}</a></h3>
		                                <span v-if="item.province">{{item.province}}{{item.city?' | '+item.city:''}} {{item.area?' | '+item.area:''}}，{{item.jobNature}}</span>
		                            </dd>
		                        </dl>
		                        <a class="all" @click="allJob(jobDetails.companyName)">全部职位</a>
		                    </div>
		                </div>
		                <div class="col-l">
		                    <div class="cont">
		                        <div class="tp bdsharebuttonbox">
		                            <a class="bds_more" data-cmd="more">分享到<i></i></a>
		                            <h3>{{jobDetails.title}}<em>{{jobDetails.salary}}</em></h3>
		                        </div>
		                        <div class="info j-small-info">
		                            <span class="addr" v-if="jobDetails.province">{{jobDetails.province}} | {{jobDetails.city}}</span>
		                            <span class="j-type" v-if="jobDetails.jobNature">{{jobDetails.jobNature}}</span>
		                            <span class="j-time" v-if="jobDetails.createTime">{{getTime(jobDetails.createTime)}}</span>
		                        </div>
		                        <div class="box">
		                            <div class="item">
		                                <h3>职位描述 </h3>
		                                <div class="desc" v-html="jobDetails.jobDescription">
											<!-- {{jobDetails.jobDescription}} -->
		                                    <!-- <p>1、负责网易云音乐市场推广视觉项目，能够独立承担重点设计项目，主导整体视觉风格和创意设计方案并能够提供合理可行的解决方案并执行呈现；</p>
		                                    <p>2、熟悉市场推广视觉业务，基于对产品业务以及用户的了解，参与营销策划的创意和构思，有清晰的创意思路；</p>
		                                    <p>3、有一定的品牌sense，基于品牌业务的了解输出视觉驱动型创意方案；</p>
		                                    <p>4、分享设计经验、推动提高团队的设计能力。</p> -->
		                                </div>
		                            </div>
		                            <div class="item">
		                                <h3>职位要求 </h3>
		                                <div class="desc" v-html="jobDetails.skillDescription">
											<!-- {{jobDetails.skillDescription}} -->
		                                    <!-- <p>1、设计类专业本科及以上学历，3年以上互联网视觉设计经验；</p>
		                                    <p>2、熟练掌握PS、AI、C4D等设计呈现的软件，对设计定位、风格定义、规范执行有较深的理解；</p>
		                                    <p>3、热爱音乐了解音乐用户，出色的视觉表现能力，较高的审美和创新能力、良好的业务理解力以及视觉思维判断力，有优秀市场向落地项目经验者加分；</p>
		                                    <p>4、有较高的综合素质、逻辑清晰、善于沟通、工作兼容度高，有极强的责任心；</p>
		                                    <p>5、简历需附带个人近期作品或链接</p> -->
		                                </div>
		                            </div>
		                        </div>
		                        <div class="bot">
		                            <p><span>请发送简历至：<a :href="'mailto:'+jobDetails.companyEmail">{{jobDetails.companyEmail}}</a></span></p>
		                            <p>邮件标题格式为：应聘 + 职位名称 + 来源GAMEUI</p>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!-- 内容 -->
	</div>
</template>

<script>
	import common from '../../../static/utils/common.js';
	import API from '../../../static/utils/API.js';
	import layer from "layui-layer";
	import { regionData,provinceAndCityData, CodeToText } from "element-china-area-data";
	
	import { parseTime } from "../../../static/utils/formatdate.js";
	export default{
		components:{
			layer
		},
		data() {
			return {
				mailto:'',
				defaultAvatar:require('../../assets/images/imgl1.png'),
				banImg:require('../../assets/202204/nav_zhaopin.jpg'),
				jobNatureParam: {
					type: 'job_nature',
				},
				jobNatureList: [],
				jobListParam: {
					pageNum: 1,
					pageSize: 15,
					title:''
				},
				jobList: [],
				total: 0,             // 总条数，根据接口获取数据长度(注意：这里不能为空)
				currentPage: 1        ,// 默认显示第一页
				showDetails:false,
				jobDetailsParam:{
					
				},
				jobDetails:{
					
				},
				listParam: {
					pageNum: 1,
					pageSize: 4
				},
				list:[],
				options: regionData,
				selectedOptions: [],
				jobNature:'工作性质'
			}
		},
		mounted: function() {
			document.title='游戏UI/UX设计师垂直招聘平台-GAMEUI.NET-游戏UI/UX学习、交流、分享平台'
			this.getJobNatureList()
			this.getJobList();
			
			this.options.forEach(f=>{
				if(f.children){
					f.children.forEach(s=>{
						if(s.label=='市辖区'){
							f.children=s.children;
						}
					})
				}
			})

			if(window._bd_share_main){
				window._bd_share_main.init();
			}else{
				window._bd_share_config={
					"common":{
						"bdSnsKey":{},
						"bdText":"",
						"bdMini":"1",
						"bdMiniList":false,
						"bdPic":"",
						"bdStyle":"1",
						"bdSize":"24"
					},
					"share":{}
				};
				const s = document.createElement('script');
				s.type = 'text/javascript';
				s.src = 'https://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
				document.body.appendChild(s)
			}
	    },
		methods: {
			resetSearch(){
				this.jobListParam.title='';
				this.jobListParam.pageNum=1;
				this.jobList=[];
				this.getJobList();
			},
			getTime(time){
				 return parseTime(time,"{y}-{m}-{d}")
			},
			goSearch(e){
				// if(!this.jobListParam.title)return;
				if(e.key=='Enter'){
					this.jobListParam.pageNum=1;
					this.jobList=[];
					this.total=0;
					this.getJobList();
				}
			},
			handleChange() {
			  var loc = "";
			  let that = this;
			  if(this.selectedOptions.length>0){
				for (let i = 0; i < this.selectedOptions.length; i++) {
					loc += CodeToText[this.selectedOptions[i]];
					if(i == 0){
						that.jobListParam.province = CodeToText[this.selectedOptions[i]]
					}
					if(i == 1){
						that.jobListParam.city = CodeToText[this.selectedOptions[i]]
					}
					if(i == 2){
						that.jobListParam.area = CodeToText[this.selectedOptions[i]]
					}
				}
			  }else{
				  that.jobListParam.province='';
				  that.jobListParam.city='';
				  that.jobListParam.area='';
			  }
			  this.getJobList();
			},
			allJob:function (companyName) {
				this.jobListParam.companyName = companyName
				this.showDetails = false
				this.getJobList()
			},
			detailsShow:function (jobId) {
				
				this.jobDetailsParam.id = jobId
				var that =  this
				common.requestGet(API.jobDetails,this.jobDetailsParam,function(result){
					that.showDetails = true
					
					that.jobDetails = result.data
					that.listParam.companyName = that.jobDetails.companyName
					common.requestPost(API.jobList,that.listParam,function(result){
						
						that.list = result.data
					})
				})
			},
			detailsCancle:function () {
				this.showDetails = false
			},
			jobNatureChange: function (jobNature) {
				
				this.jobNature = jobNature
				this.jobListParam.jobNature = jobNature
				this.jobListParam.pageNum = 1
				this.getJobList()
			},
			getJobNatureList: function(){
				var that =  this
				common.requestPost(API.jobAttributeGroup,this.jobNatureParam,function(result){
					if(result.code == 0){
						that.jobNatureList = result.data.job_nature
					}
				})
			},
			toHome: function(){
				this.$router.push("/recruitHome");
			},
			toJob: function(){
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.$router.push("/job");
			},
			toPublishJob: function(){
				let token = window.localStorage.getItem('token');
				if(!token){
					this.$parent.showLogin({loginType:0});
					return;
				}
				this.$router.push("/publishJob");
			},
			toPublishEpiboly: function(){
				// let token = window.localStorage.getItem('token');
				// if(!token){
				// 	this.$parent.showLogin({loginType:0});
				// 	return;
				// }
				this.$router.push("/publishEpiboly");
			},
			// 每页显示的条数改变
			 changeSizeHandle(val) {
				 this.jobListParam.pageSize = val                   // 改变每页显示的条数 
				 this.jobListParam.pageNum = 1              // 注意：在改变每页显示的条数时，要将页码显示到第一页
				 this.currentPage = 1
				 this.getJobList()                    // 点击每页显示的条数时，显示第一页
				 
			 },
			 // current-change用于监听页数改变，而内容也发生改变
			 currentChangeHandle(val) {
				  $('body,html').animate({
					'scrollTop':0
				}, 0);
				 this.jobListParam.pageNum = val                // 改变默认的页数
				 this.currentPage = val 
				 this.getJobList()                        // 切换页码时，要获取每页显示的条数
				 
			 },
			getJobList: function () {
				var that =  this
				common.requestPost(API.jobList,this.jobListParam,function(result){
					
					if(result.code == 0){
						that.jobList = result.data
						that.total = result.total
					}
				})
			},
		}
	}
</script>

<style scoped>


.job-addr-cascader .el-input input::-webkit-input-placeholder,.job-addr-cascader .el-input__suffix i{
	color:#606266 !important;
}

.el-dropdown-menu__item:not(.is-disabled):hover{
	color:#fff !important;
	background:#11CCB1 !important;
	border-radius:6px !important;
}

.el-dropdown-menu{
	padding:10px !important;
}


.m-mess .top .pic img{
	height:100% !important;
}




.g-titq3 h3{
	font-weight: normal !important;
}
.m-mess .top .txt h3{
	text-align: center;
}


.m-sobox .rr{
	margin-top:0px;
}


.job-addr-cascader{
	border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.m-sobox .form{
	height:43px !important;
}































</style>
